<template>
  <div class="Applicant-information pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i
      >报名人员信息
      <i class="iconfont icon-gengduo"></i>
    </div>
    <div class="section">
      <div class="content">
        <!-- <div class="filter-box flex-between">
          <div class="it-box">
            <van-dropdown-menu>
              <van-dropdown-item v-model="params.sex" :options="sexOption" />
            </van-dropdown-menu>
          </div>
          <div class="it-box">
            <van-dropdown-menu>
              <van-dropdown-item v-model="params.age" :options="ageOption" />
            </van-dropdown-menu>
          </div>
          <div class="search-box">
            <van-search
              v-model="params.name"
              shape="round"
              background="#fff"
              placeholder="请输入姓名搜索"
              @search="search"
              @clear="params.name = ''"
            />
          </div>
        </div> -->
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          > -->
        <div class="item flex-align" v-for="(item, index) in list" :key="index">
          <img class="img" :src="item.avatar" alt=""  @click="requirement(item.id)" />
          <div class="right">
            <div class="row">
              <div class="row-it">
                <div class="label">姓名</div>
                <span>{{ item.userName }}</span>
              </div>
              <div class="row-it">
                <div class="label">出生年份</div>
                <span>{{ item.birthday | filterTime }}<i>年</i></span>
              </div>
            </div>
            <div class="row">
              <div class="row-it">
                <div class="label">学历</div>
                <span v-for="(dhq,ycq) in educationList" v-if="item.educational === dhq.value">{{dhq.title}}</span>
              </div>
              <div class="row-it">
                <div class="label">年收入</div>
                <span>{{ item.yearAward }}<i>万</i></span>
              </div>
            </div>
            <div class="row">
              <div class="row-it">
                <div class="label">身高</div>
                <span>{{ item.height }}<i>cm</i></span>
              </div>
            </div>
            <div class="row">
              <div class="row-it">
                <div class="label">职业 <span>{{ item.quarters }}</span></div>
              </div>
            </div>
            <div class="row">
              <div class="row-it">
                <div class="label">工作地点： <span>{{ item.workAddress }}</span></div>
              </div>
            </div>
          </div>
        </div>
        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
    <van-popup v-model="isSelection" position="center" :style="{width:'90% ',height: '50%' }" style="border-radius: 10px;">
      <div class="selection">
        <div>择偶要求</div>
        <div class="selection-title">
          <div class="selection-name">
            <p><span>年份</span>：{{ boyfriend.ageStart || "未填写" }}~{{ boyfriend.ageEnd || "未填写" }}</p>
            <p><span>身高</span>：{{ boyfriend.heightStart || "未填写" }}<i v-if="boyfriend.heightStart">cm</i>~{{ boyfriend.heightEnd || "未填写" }}<i v-if="boyfriend.heightEnd">cm</i></p>
            <p><span>年收入</span>： <i v-if="boyfriend.targetAward !== 0">{{ boyfriend.targetAward }}万</i><i v-if="boyfriend.targetAward === 0">暂无收入</i></p>
          </div>
          <div class="selection-img"><img :src="boyfriend.avatar" alt=""></div>
        </div>
        <div class="selection-company">
          <p><span>婚姻状况</span>：{{ targetIsmarital }}</p>
          <p><span>学历</span>：{{ learning || "未填写" }}</p>
          <div>职业：{{ study || "未填写" }}</div>
        </div>
        <van-button color="linear-gradient(to left, #f95579, #fd7493)" @click="off">关闭</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { applicantsInfo } from "@/api/activity";
import {getcategory} from "../api/fellowship";
import {getTargetInfo} from "../api/activity";
export default {
  data() {
    return {
      sexOption: [
        { text: "性别", value: 0 },
        { text: "男", value: 1 },
        { text: "女", value: 2 },
      ],
      ageOption: [
        { text: "年龄", value: 0 },
        { text: "20", value: 1 },
        { text: "21", value: 2 },
      ],
      params: {
        pageNo: 1,
        pageSize: 10,
        sex: 0,
        age: 0,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      educational: null,
      educationList: [],
      isSelection: false,
      boyfriend: [],
      targetIsmarital: "",
      educationTitle:{0: "其他",1:"初中及以下",2:"高中",3:"大专",4:"本科",5:"硕士",6:"博士"},
      objectEducationCheck:[],
      targetOccupationCheck:[],
      learning: "",
      study: "",
    };
  },
  watch: {
    "params.sex": {
      handler(val) {
        this.onRefresh();
      },
    },
    "params.age": {
      handler(val) {
        this.onRefresh();
      },
    },
  },
  created() {
    if (!localStorage.getItem("jyToken")) {
      return this.$router.push({
        name: "Login",
        query: { dirUrlName: "ApplicantInformation", id: this.$route.query.id },
      });
    }
    this.zhiYe()
    this.getEducationList()
    this.getList();
  },
  filters: {
    filterTime(val){
      return val.slice(0,4)
    }
  },
  methods: {
    getList() {
      applicantsInfo({
        id: this.$route.query.id,
      })
        .then((res) => {
          if (res.code === 0) {
            this.list = res.data;
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("信息获取失败，请稍后重试！");
        });
    },
    off(){
      this.isSelection = false
    },
    // 获取学历信息
    async getEducationList() {
      await getcategory("xlxz").then((res) => {
        if (res.code === 0) {
          this.educationList = res.data;
        }
      });
    },
    zhiYe(){
      getcategory("zylb").then((res) => {
        if (res.code === 0) {
          this.targetOccupationList = res.data
          let b = []
          this.targetOccupationList.forEach(item=>{
            b.push(item.title)
          })
          this.occupationTitle = {...b}
        }
      });
    },
    // 择偶要求
    requirement(id){
      this.isSelection = true
      getTargetInfo({userId:id}).then(res=>{
        console.log(res);
        this.boyfriend = res.data
        if(this.boyfriend.taergetEducational === null || this.boyfriend.taergetEducational === ""){
          this.learning = "未填写"
        }else{
          this.objectEducationCheck = this.boyfriend.taergetEducational.split(",")
          let a = []
          this.objectEducationCheck.forEach(item=>{
            a.push(this.educationTitle[parseInt(item.substr(0))])
          })
          this.learning = a.join()
        }
        if(this.boyfriend.targetQuarters === null || this.boyfriend.targetQuarters === ""){
          this.study = "未填写"
        }else{
          this.targetOccupationCheck = this.boyfriend.targetQuarters.split(",")
          let b = []
          this.targetOccupationCheck.forEach(item=>{
            b.push(this.occupationTitle[parseInt(item.substr(0))])
          })
          this.study = b.join()
        }
        if(this.boyfriend.targetIsmarital === "0"){
          this.targetIsmarital = "无婚史"
        } else if(res.data.targetIsmarital === "1"){
          this.targetIsmarital = "离异或丧偶且无孩"
        } else if(res.data.targetIsmarital === "2"){
          this.targetIsmarital = "离异或丧偶且有孩"
        }else{
          this.targetIsmarital = "未填写"
        }
      })
    },
    search() {
      this.onRefresh();
    },
    onLoad() {
      applicantsInfo(this.params).then((res) => {
        if (res.code === 0) {
          let data = res.data;
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
          }
          if (this.params.pageNo == 1) {
            this.list = data.records;
          } else {
            this.list = this.list.concat(data.records);
          }
          this.loading = false;

          if (this.list.length >= data.total) {
            this.finished = true;
          } else {
            this.params.pageNo++;
          }
        }
      });
    },
    onRefresh() {
      this.params.pageNo = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>
<style lang="less" scoped>
.Applicant-information {
  background: #f6f7f8;
  .header {
    .icon-gengduo {
      right: 15px !important;
      font-size: 25px;
    }
  }
  .content {
    padding: 16px 16px 20px;
    .filter-box {
      padding: 15px 0;
      .it-box {
        width: 62px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px;
        margin-right: 10px;
      }
    }
    .item {
      background: #ffffff;
      border-radius: 6px;
      padding: 12px;
      margin-bottom: 12px;
      .img {
        width: 90px;
        height: 110px;
        background: #c4c4c4;
        border-radius: 2px;
        margin-right: 10px;
      }
      .right {
        flex: 1;
        .row {
          display: flex;
          align-items: center;
          padding: 5px 0;
          .row-it {
            flex: 1;
            display: flex;
            align-items: center;
            .label {
              font-size: 14px;
              color: #363a44;
              margin-right: 6px;
            }
            span {
              font-size: 14px;
              color: #686b73;
            }
          }
        }
      }
    }
  }
}
/deep/.van-dropdown-menu__bar {
  height: 32px !important;
  border-radius: 4px;
}
/deep/.van-search {
  padding: 0;
  border-radius: 20px;
}
/deep/.van-search__content {
  background: #fff;
}
.selection{
  padding: 20px;
  .selection-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
    .selection-name{
      display:flex;
      flex-direction: column;
      span{
        display:inline-block;
        width: 65px;
        text-align: left;
      }
    }
    .selection-img{
      width: 100px;
      height: 100px;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .selection-company{
    p{
      span{
        display:inline-block;
        width: 65px;
        text-align: left;
      }
    }
  }
  .van-button{
    margin: 10px 0;
    width: 100%;
    border-radius: 22px;
  }
}
</style>
